<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
      
    案例一： 双向数据绑定  v-model 默认绑定value属性，所以只能应用于表单元素 <hr/>
    <!-- 数据改变，input的值也跟着变化，input的值变化，数据也跟着变化，这就是双向数据绑定 -->
    <input type="text" v-model="val">
    <p> {{ val }} </p>

    案例二： 使用单向数据绑定实现双向数据绑定； v-bind + 事件来实现的 <hr/> 
    <input type="text"  :value="msg"  @input="setMsg" >
    <p> {{ msg }} </p>


    案例三： v-model 好处: 可以快速拿到表单的值  <hr/>
    <div class="row">
      <label for=""> 用户名 </label>
      <input v-model = "username" />
    </div>
    <div class="row">
      <label for=""> 密码 </label>
      <input v-model = "pass" />
    </div>
    <div class="row"><button @click="login"> 登录 </button></div>


  </div>

</body>
<script src="../../lib/vue.global.js"></script>
<script>

  /* 
    总结
        如果针对表单元素 
          看见表单就直接v-model
  */
  Vue.createApp({
    data () {
      return {
        val: 'hello  vue.js3',
        msg: '123123',
        username: '',
        pass: ''
      }
    },
    methods: {
      login () {
        alert(this.username + this.pass)
      },
      setMsg (e) {
        this.msg = e.target.value 
      }
    }
  }).mount('#app')
</script>
</html>